<template>
  <div class="layout-padding">
    <splitpanes horizontal>
      <pane size="50">
        <div class="layout-padding-auto layout-padding-view">
          <!--查询表单-->
          <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList" >

            <el-form-item :label="$t('wms.cardCode')" prop="cardCode">
              <el-input v-model="state.queryForm.cardCode" clearable :placeholder="$t('wms.cardCode')"/>
            </el-form-item>
            <el-form-item :label="$t('wms.assetName')" prop="assetName">
              <el-input v-model="state.queryForm.assetName" clearable :placeholder="$t('wms.assetName')"/>
            </el-form-item>
            <el-form-item :label="$t('wms.assetCode')" prop="assetCode">
              <el-input v-model="state.queryForm.assetCode" clearable :placeholder="$t('wms.assetCode')"/>
            </el-form-item>
            <el-form-item>
              <el-button icon="search" type="primary"  @click="getDataList">{{$t('btn.search')}}</el-button>
              <el-button icon="refresh"  plain @click="resetQuery">{{$t('btn.reset')}}</el-button>
              <el-button icon="Upload" type="success" @click="importFormDialogRef.openAddDialog()">{{$t('report.Import')}}</el-button>
              <el-button icon="Download" type="success" plain @click="exportExcel">{{$t('report.export')}}</el-button>

              <el-button icon="el-icon-delete" type="danger"
                         @click="handleDelete(selectObjs)">{{ $t('btn.delete')}}
              </el-button>
              <el-select v-model="PrinterName" placeholder="Select" style="width: 160px;margin-left:12px">
                <el-option :key="ds.id" :label="ds.value" :value="ds.value" v-for="ds in printerOptions"></el-option>
              </el-select>
              <el-button type="primary"  @click="print" style="margin-left:12px">
                <el-icon>
                  <Printer/>
                </el-icon>
                {{ $t('bar.print') }}
              </el-button>
            </el-form-item>
          </el-form>
          <!--查询结果的列表-->
          <el-table :data="state.dataList" highlight-current-row
                    v-loading="state.loading" border style="width: 100%;height: 100%"
                    :cell-style="tableStyle.cellStyle" stripe :header-cell-style="tableStyle.headerCellStyle"
                    @row-click="clickRow"
                    @selection-change="selectionChangeHandle"
                    ref="tableRef">
            <el-table-column type="selection" width="40" align="center" show-overflow-tooltip/>
            <el-table-column prop="cardCode" fixed :label="$t('wms.cardCode')" width="140" show-overflow-tooltip/>
            <el-table-column prop="assetOrg" :label="$t('wms.assetOrg')" width="180" show-overflow-tooltip/>
            <el-table-column prop="shippersOrg" :label="$t('wms.shipperOrg')" width="180" show-overflow-tooltip/>
            <el-table-column prop="cardSource" :label="$t('wms.cardSource')" width="140" show-overflow-tooltip/>
            <el-table-column prop="assetClass" :label="$t('wms.assetClass')" width="140" show-overflow-tooltip/>
            <el-table-column prop="assetName" :label="$t('wms.assetName')" width="400" show-overflow-tooltip/>
            <el-table-column prop="unit" :label="$t('iot.unit')" width="140" show-overflow-tooltip/>
            <el-table-column prop="assetsNumber" :label="$t('iot.qty')" width="140" show-overflow-tooltip>
              <template #default="scope">
                <el-tag effect="plain" type="warning">{{scope.row.assetsNumber}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="startDate" :label="$t('wms.startDate')" width="180" show-overflow-tooltip/>
            <el-table-column prop="assetCode" :label="$t('wms.assetCode')" width="140" show-overflow-tooltip/>
            <el-table-column prop="barcode" :label="$t('qms.barCode')" width="140" show-overflow-tooltip/>
            <el-table-column prop="specification" :label="$t('qms.specification')" width="140" show-overflow-tooltip/>
            <el-table-column prop="assetLocation" :label="$t('wms.assetLocation')" width="240" show-overflow-tooltip/>
            <el-table-column prop="manufacturer" :label="$t('wms.manufacturer')" width="240" show-overflow-tooltip/>
            <el-table-column prop="documentStatus" :label="$t('mes.assetStatus')" width="140" show-overflow-tooltip/>
            <el-table-column prop="dispositionSituation" :label="$t('wms.dispositionSituation')" width="140" show-overflow-tooltip/>
            <el-table-column prop="availableQuantity" :label="$t('wms.quantityAvailable')" width="140" show-overflow-tooltip/>
            <el-table-column prop="requisitionedQuantity" :label="$t('wms.quantityReceived')" width="140" show-overflow-tooltip/>
            <el-table-column prop="initialization" :label="$t('wms.initialize')" width="140" show-overflow-tooltip/>
            <el-table-column fixed="right" :label="$t('operation.Operation')" width="140" show-overflow-tooltip>
              <template #default="scope">
                <el-button icon="delete" type="danger"
                           @click="handleDelete([scope.row.id])">
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
        </div>
      </pane>
      <pane size="50">
        <div class="layout-padding-auto layout-padding-view">
          <el-tabs model-value="first">
            <el-tab-pane name="first">
              <template #label>
                <el-icon>
                  <calendar/>
                </el-icon>
                <span class="ml-0.5"> {{$t('qms.detail')}} </span>
              </template>
            </el-tab-pane>
          </el-tabs>
          <LocationList ref="locationRef"/>
        </div>
      </pane>
    </splitpanes>
    <importForm ref="importFormDialogRef" @getChildren="oncFun"/>
  </div>

</template>

<script setup lang="ts">

import {BasicTableProps, useTable} from "/@/hooks/table";
import {delObjs, fetchList, getDetailsPageSet, printCard} from "/@/api/platform/digital/wmsAssetCard";
import {useMessage, useMessageBox} from "/@/hooks/message";
import LocationList from "/src/views/wms/wmsAssetCard/location/list.vue";
import {ref} from "vue";
import {useI18n} from 'vue-i18n';
import {downBlobFile} from "/@/utils/other";
import {getPrinter} from "/@/api/platform/wms/sp";
import {ElMessage} from "element-plus";

const {t} = useI18n();
const importForm = defineAsyncComponent(() => import('./importForm.vue'));

const importFormDialogRef = ref()
// 搜索变量
const queryRef = ref()
const locationRef = ref()
const printerOptions = ref();
const PrinterName = ref('');
const tableRef = ref();

// 仓库表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: fetchList
})
//  table hook
const {
  tableStyle,
  getDataList,
  sizeChangeHandle,
  currentChangeHandle
} = useTable(state)

const oncFun = () => {
  getDataList()
}

// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({id}) => id);
  multiple.value = !objs.length;
};
const exportExcel = () => {
  downBlobFile("/eletile-digital/wmsAssetCard/download", {"flag": true}, "资产卡片（AssetCard）.xlsx");
}

onMounted(() => {
  getPrinter({code: "printerSetup", text: ""}).then((res) => {
    printerOptions.value = res.data;
  });
});


/**
 * 打印
 */
const print = () => {
  var selectedAry = tableRef.value.getSelectionRows();
  if (!PrinterName.value) {
    ElMessage.error(t('bar.selectPrinter'));
    return;
  }
  if (selectedAry.length == 0) {
    ElMessage.error(t('bar.selectBarcodes'));
    return;
  }
  selectedAry.forEach(item => {
    let detials = getDetailsPageSet({
      assetCode: item.assetCode,
      current:1,
      size:9999
    });
    detials.then((res) =>{
      if (res.data.records.length >= 1) {
        printCard({"list": res.data.records, "printerName": PrinterName.value})
      }
    })
  })
}

// 删除操作
const handleDelete = async (ids: Array<number>) => {
  if (ids?.length === 0) {
    return useMessage().warning('请选择要删除的项')
  }

  useMessageBox().confirm(t('operation.permanentDeletion')).then(async () => {
    try {
      await delObjs(ids)
      getDataList();
      useMessage().success('删除成功');
    } catch (err: any) {
      useMessage().error("删除失败!" + err.msg)
    }
  })
};

// 点击行的时候触发
const clickRow = (row: any) => {
  locationRef.value.query(row)
}

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList(false)

}
</script>
